<template>
	<view class="wrapper">
		<image class="header" src="../../static/love/header.png" mode=""></image>
		<view class="content" style="background: url(../../static/love/bg.png);background-size: 100% 100%;">
			<view class="name">
				真爱合约
			</view>
			<view class="title">
				执子之手 与子偕老
			</view>
			<view class="desc">
				真爱合约不仅仅是一份特殊的礼物，更是你对TA一份爱的 承诺，合约只是一条直线，签定  只是为了和TA走进婚姻的 殿堂 。 
				<br />
				在接下来的日子里希望你们在可以遵守约定，携手共白头。
			</view>
			<image class="line" src="../../static/love/line.png" mode=""></image>
			<view class="address">
				<view class="top">
					<image src="../../static/love/location.png" mode=""></image>
					<text class="location">广州</text>
					<text class="money">快递：0元</text>
				</view>
				<view class="bottom">
					<text>配送至：广州市 白云区 金山街道 某某某地</text>
					<image src="../../static/love/arrow.png" mode=""></image>
				</view>
			</view>
			<image class="line" src="../../static/love/line.png" mode=""></image>
			<view class="foot">
				<view class="money">
					<text>￥19.9</text>
					<text>免运费</text>
				</view>
				<view class="pay" style="background: url(../../static/love/btn.png);background-size: 100% 100%;">
					<text>立即支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.wrapper {
		height: 100vh;
		background: linear-gradient(to bottom, #FF6F6C, #A9EDE9);
		overflow-y: scroll;
	}
	image.header {
		width: 100%;
		height: 700rpx;
		padding-top: 100rpx;
		position: relative;
		z-index: 2;
	}
	.content {
		min-height: calc(100vh - 700rpx);
		background: #fff;
		padding: 20rpx 5%;
		position: relative;
		z-index: 1;
		margin-top: -230rpx;
		.name {
			font-size: 48rpx;
			color: #fa5b57;
			margin-top: 250rpx;
		}
		.title {
			font-size: 36rpx;
			color: #fa5b57;
			margin: 20rpx 0 30rpx;
		}
		.desc {
			font-size: 24rpx;
			color: #8C8787;
		}
		image.line {
			width: 100%;
			height: 2rpx;
			margin: 50rpx 0;
		}
		.address {
			.top {
				display: flex;
				align-items: center;
				image {
					width: 47rpx;
					height: 51rpx;
				}
				text.location {
					font-size: 36rpx;
					color: #000000;
					padding: 0 48rpx 0 28rpx;
				}
				text.money {
					font-size: 30rpx;
					color: #656262;
				}
			}
			.bottom {
				margin: 27rpx 0 0 75rpx;
				display: flex;
				justify-content: space-between;
				image {
					width: 30rpx;
					height: 52rpx;
				}
			}
		}
		.foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.money {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text:nth-child(1) {
					font-size: 45rpx;
					color: #FA5B57;
				}
				text:nth-child(2) {
					font-size: 24rpx;
					color: #898180;
				}
			}
			.pay {
				width: 336rpx;
				height: 107rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				text {
					display: block;
					color: #fff;
					padding-right: 50rpx;
					margin-top: -10rpx;
				}
			}
		}
	}
</style>